<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>问卷管理测试页面</span>
        </div>
      </template>
      
      <div class="test-content">
        <h2>PC端问卷管理功能测试</h2>
        <p>如果你能看到这个页面，说明PC端路由配置正常。</p>
        
        <el-divider />
        
        <h3>功能测试</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover">
              <template #header>
                <div class="test-card-header">
                  <span>问卷列表</span>
                </div>
              </template>
              <div class="test-card-content">
                <p>管理问卷的增删改查</p>
                <el-button type="primary" @click="testQuestionnaireList">测试问卷列表</el-button>
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="8">
            <el-card shadow="hover">
              <template #header>
                <div class="test-card-header">
                  <span>题目管理</span>
                </div>
              </template>
              <div class="test-card-content">
                <p>管理问卷题目和选项</p>
                <el-button type="primary" @click="testQuestionManagement">测试题目管理</el-button>
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="8">
            <el-card shadow="hover">
              <template #header>
                <div class="test-card-header">
                  <span>答卷管理</span>
                </div>
              </template>
              <div class="test-card-content">
                <p>查看和管理答卷数据</p>
                <el-button type="primary" @click="testAnswerManagement">测试答卷管理</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <el-divider />
        
        <h3>API测试</h3>
        <el-button type="success" @click="testAPI">测试API连接</el-button>
        
        <div v-if="apiResult" class="api-result">
          <h4>API测试结果：</h4>
          <pre>{{ apiResult }}</pre>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="QnQuestionnaireTest">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { listQuestionnaire } from '@/api/questionnaire'

const router = useRouter()
const apiResult = ref('')

// 测试问卷列表
function testQuestionnaireList() {
  router.push('/questionnaire/index')
}

// 测试题目管理
function testQuestionManagement() {
  router.push('/questionnaire/question')
}

// 测试答卷管理
function testAnswerManagement() {
  router.push('/questionnaire/answer')
}

// 测试API连接
async function testAPI() {
  try {
    const response = await listQuestionnaire({ pageNum: 1, pageSize: 10 })
    apiResult.value = JSON.stringify(response, null, 2)
  } catch (error) {
    apiResult.value = `API错误: ${error.message}`
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.test-content {
  padding: 20px;
}

.test-content h2 {
  color: #303133;
  margin-bottom: 20px;
}

.test-content h3 {
  color: #606266;
  margin: 30px 0 20px 0;
}

.test-card-header {
  font-weight: bold;
  color: #303133;
}

.test-card-content {
  text-align: center;
  padding: 20px 0;
}

.test-card-content p {
  margin-bottom: 15px;
  color: #606266;
}

.api-result {
  margin-top: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}

.api-result h4 {
  margin-bottom: 10px;
  color: #303133;
}

.api-result pre {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  overflow-x: auto;
  font-size: 12px;
}
</style> 